import React, { useEffect, useState } from 'react'
import { Space, Table, Tag, Button ,Input } from 'antd';
import axios from '../../utils/axios';
import DelModal from "../../components/Delmodal"
import Addmodal from '../../components/Addmodal';
import { AudioOutlined } from '@ant-design/icons';
const { Column, ColumnGroup } = Table;
const { Search } = Input;
const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
function Data() {
  let [arr, setArr] = useState([])
  let [delIndex, setDelIndex] = useState(0)
  let [delIsopen, setDelIsopen] = useState(false)
  let  [addIsopen,setAddIsopen] = useState(false)
  let [editItem,setEdititem] = useState({})
  let [editIndex,setEditindex] = useState(0)
  let [isadd,setIsadd] = useState("新增")
  useEffect(() => {
    axios.get("/api/list").then(res => {
      setArr(res.data)
    })
  }, [])
  let delfn = (index) => {
    console.log(index);
    setDelIsopen(true)
    setDelIndex(index)
  }
  let delreceive = (data, sure) => {
    setDelIsopen(data)
    if (sure) {
      let newarr = [...arr]  // react 不能操作原来的数据，需要拷贝一下
      newarr.splice(delIndex, 1)
      setArr(newarr)
    }
  }
  let addfn = ()=>{
    setAddIsopen(true)
    setIsadd("新增")
  }
  let closeaddfn = (data,values)=>{
      setAddIsopen(data)
      if (values && isadd === "新增") {
        let newarr = [...arr]
        newarr.push(values)
        setArr(newarr)
      } else if (values && isadd === "编辑") {
        let newarr = [...arr]
        newarr.splice(editIndex,1,values)
        console.log(newarr);
        setArr(newarr)
      }
  }
  let editfn = (item,index)=>{ // 编辑要回显数据
      console.log(item,index)
      setEdititem(item)
      setEditindex(index)
      setDelIndex(index)
      setAddIsopen(true)
      setIsadd("编辑")
  }
  const onSearch = (value) =>{
      let newarr = arr.filter((item,index)=>{
        return item.name.includes(value)
      })
      setArr(newarr)
  };
  const resetfn = ()=>{
    axios.get("/api/list").then(res => {
      setArr(res.data)
    })
  }
  return (
    <>
      <div>
        <Button type="primary" onClick={addfn}>新增</Button>
        <Button type="primary" onClick={resetfn} style={{marginLeft:"50px"}}>重置</Button>
        <Search placeholder="请输入姓名" onSearch={onSearch} enterButton  style={{
          width: 200,float:"right"
        }}/>
      </div>
     
      <div style={{marginTop:"30px"}}>
        <Table dataSource={arr}>

          <Column title="Name" dataIndex="name" key="Name" />


          <Column title="Age" dataIndex="age" key="age" />
          <Column title="Address" dataIndex="address" key="address" />

          <Column
            title="Action"
            key="action"
            render={(_, record, index) => (
              <Space size="middle">
                  {
                    window.localStorage.getItem("user") === "admin" ? <a onClick={()=>editfn(record,index)}>edit</a> :null
                  } 
                <a onClick={() => delfn(index)}>Delete</a>
              </Space>
            )}
          />
        </Table>
      </div>

      <DelModal delIsopen={delIsopen} delreceive={delreceive}></DelModal>
      <Addmodal addIsopen={addIsopen} closeaddfn={closeaddfn} editItem={editItem} editIndex={editIndex} isadd={isadd}></Addmodal>
    </>

  )
}

export default Data